<template>
  <div class="bannerItem">
    <!-- <el-image :src="utils.setCdnUrl() + dataItem.video_url + '?x-oss-process=video/snapshot,t_1,f_png'" @click="goToRelation(dataItem)"> </el-image> -->
    <video v-if="dataItem.video_url" muted class="video-player" x5-video-player-type="h5" x-webkit-airplay="true"  webkit-playsinline="true"
      playsinline="" :poster="utils.setCdnUrl() + dataItem.video_url + '?x-oss-process=video/snapshot,t_1,f_png'"  preload="none" autoplay="" loop=""  @click="goToRelation(dataItem)" >
      <source :src="utils.setCdnUrl() +  dataItem.video_url" />
    </video>
    <el-image v-else-if="dataItem.image" :src="utils.setCdnUrl() + dataItem.image" @click="goToRelation(dataItem)"> </el-image>

    <div class="title_con" @click="goToRelation(dataItem)">
      <p class="title" @click="goToRelation(dataItem)" :style="'color:'+dataItem.first_title_font_color + ';left:'
      + dataItem.first_title_font_position_left+'%;top:' +dataItem.first_title_font_position_up + '%;font-size:'
      + dataItem.first_title_font_size + 'px;width:calc(100% - '+dataItem.first_title_font_position_left+'%)'  +';padding-right:'+ dataItem.first_title_font_position_left+ '%' " >{{dataItem.first_title}}</p>
      <div class="subTitle" @click="goToRelation(dataItem)" :style="'color:'+dataItem.second_title_font_color + ';left:'  + 
        dataItem.second_title_font_position_left+'%;top:' + dataItem.second_title_font_position_up +  '%;font-size:' 
        + dataItem.second_title_font_size +'px;width:calc(100% - '+dataItem.second_title_font_position_left+'%)' +';padding-right:'+ dataItem.second_title_font_position_left+ '%' ">
        <p >{{dataItem.second_title}}</p> 

     
      </div>
    
    </div>
  </div>
</template>

<script>
export default {
  props:{
    dataItem: Object
  },
  data(){
    return{}
  },
  methods:{
    goToRelation (item) {
      let association_types = item.association_types
      let relation_type = item.relation_type // 1无关联 2 统一关联 3 分别关联
      if(relation_type !== 1) { //分别关联 //统一关联
        if(association_types == 0) { //关联产品
          this.$router.push({path: '/product/' + item.set_link})
        } else if(association_types == 1) { //关联文章
          this.$router.push({path: '/article/' + item.association_types_name})
        } else if(association_types == 2){//自定义链接 为“官网链接”，同页面跳转； 不为“官网链接”，新页面跳转；
        let hostname = window.location.hostname
        let link = item.association_types_name
        let isCurWebsite = link.indexOf(hostname) > -1
        if(isCurWebsite) {
          window.location.href = link
        } else {
          if(link.indexOf('http')> -1){
            window.open(link)
          } else {
             window.open('https://' +link)
          }
        }

        }
      }
    },
  }

}
</script>

<style>

</style>